<template>
  <div class="grid grid-cols-4 gap-4">
    <div class="bg-white border border-custom-border overflow-hidden cursor-pointer rounded-[6px] flex flex-col justify-between h-[310px]"
         v-for="item in cardData" :key="item.id" @click="handleCardClick(item.id)">
      <div class="w-full h-[172px] bg-no-repeat bg-center"
      style="background-size: contain;"
           :style="'background-image: url(' + item.cover + ');'">
        <span
            class="text-white text-sm px-2 py-0.5 bg-gradient-to-r h-6 w-14 rounded-[4px] mr-1 from-[#33C9FF] to-[#33A0FF]">
        {{ item.name}}
      </span>
      </div>
      <div class="px-4 py-4 flex-1 flex flex-col justify-end">
        <span class="text-custom-text text-base font-semibold">{{ item.name }}</span>
        <p class="card-content-item">{{item.desc}}</p>
        <div class="flex items-center justify-between">
          <span class="flex items-center gap-2">
            <img src="@/assets/images/eye-fill.png" alt="">
            <span>{{item.students}}</span>
          </span>
          <div class="flex items-center justify-end">
            <div class="flex items-center mr-1 cursor-pointer">
              <img v-if="!item.like" class="rotate-180" src="@/assets/images/thumbs-down2.png" alt="" @click.stop="setCourseLike(item, 'like')">
              <img v-else src="@/assets/images/thumbs-up.png" alt="">
              <span>{{ item.like_count }}</span>
            </div>
            <div class="flex items-center cursor-pointer">
              <img v-if="!item.dislike" src="@/assets/images/thumbs-down2.png" alt="" @click.stop="setCourseLike(item, 'dislike')">
              <img v-else class="rotate-180" src="@/assets/images/thumbs-up.png" alt="">
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
import {onMounted, ref} from "vue";
import {examApi} from "@/api/index.js";
const props = defineProps({
  cardParams: {
    type: Object,
    default: {}
  }
})
const router = useRouter()
const cardData = ref([])
const {points, paper} = props.cardParams
onMounted(() => {
  getCourseList()
})
//获取课程列表
const getCourseList = () => {
  examApi.getCourseList(
      {
        page: 1,
        pageSize: 999,
        points: points,
        paper: paper
      }
  ).then(({items, total}) => {
    cardData.value = items
  })
}
//点赞、点踩
const setCourseLike = (item,type) => {
  const params = {
    course_id: item.id,
    like: type === 'like',
    dislike: type === 'dislike'
  }
  examApi.setCourseLike(params).then(() => {
    item.like = (type === 'like');
    item.dislike = (type !== 'like');
    getCourseList()
  })
}

const handleCardClick = (id) => {
  router.push(`/examCourses/courseDetail/${id}`)
}

</script>


<style scoped lang="scss">
.text-custom-text{
  overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card-content-item{
  word-wrap: break-word;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
</style>